<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				货币设置
			</div>
		</template>
		<div class="mb-20px">
			<div>
				<p class="text-#86909C ">选择折算货币</p>
				<div
					class="mt-10px flex justify-between items-center border-1px border-#E5E6EB border-solid p-20px rounded-8px flex items-center relative">
					<p class="text-18px text-[#000] mr-10px">{{ selectedCoin.icon }}</p>
					<el-select v-model="selectedCoin.title" placeholder="Select" popper-class="person-select-pop-coin-popper">
						<el-option v-for="(item,index) in coinList" :key="index" :label="item.title" :value="item.title"
						@change="changeCoin"
						 >
						  <template #default>
							<div class="flex items-center justify-between text-14px pt-10px pb-10px box-border h-54px">
								<p>{{ item.title }}</p>
								<p>{{ item.titleZh }}</p>
							</div>
						  </template>
						</el-option>
					</el-select>
					<div class="text-18px text-[#000]
					absolute right-40px top-24px">
						{{ selectedCoin.titleZh }}
					</div>
				</div>
			</div>
			<div class="mt-200px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm()"> 确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';

interface IProps {
	isShow: boolean
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm'])

const phoneInput = ref<string>('');
const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm')
}

const selectedCoin = ref<any>({
	icon: '$',
	title: 'USD',
	titleZh: '美元'
})

const coinList = ref<any[]>([
	{
		icon: '$',
		title: 'USD',
		titleZh: '美元'
	},
	{
		icon: '¥',
		title: 'CNY',
		titleZh: '人民币'
	}
])

const changeCoin = (val: any) => {

	coinList.value.forEach((item: any) => {
		if (item.title === val) {
			selectedCoin.value.title = item.title;
			selectedCoin.value.icon = item.icon;
			selectedCoin.value.titleZh = item.titleZh;
		}
	})
}
</script>
<style lang="scss" scoped>
::v-deep .el-select__wrapper{
	border:none;
	box-shadow:none;
	padding:0;
}
::v-deep .el-select__wrapper.is-hovering:not(.is-focused){
	box-shadow:none;
}
::v-deep .el-select__selected-item ,
::v-deep .el-select__placeholder.is-transparent{
	font-size:18px;
	color:#000;
}
</style>
<style lang="scss">
	.person-select-pop-coin-popper{
		border:none !important;
		ul{
			padding:0;
			min-height:160px;
			li{
				height:54px;
			}
		}
		.el-popper__arrow::before{
			display:none;
		}
	}
</style>
